<template>
	<u-row gutter="80" class="list-game-item mb-20" @click="openGame(game)">
		<u-col span="3" class="icon">
			<u--image
				:src="game.icon" 
				:fade="true" 
				mode="aspectFit"
				duration="450" 
				radius="20" 
				width="calc(100vw/12 * 3)"
				height="calc(100vw/12 * 3)">
				  <template v-slot:loading>
					<u-loading-icon></u-loading-icon>
				  </template>
				  <view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u--image>
			<!-- <img :src="game.icon" alt=""></div> -->
		</u-col>
		<u-col span="8" class="info" justify="space-evenly">
			<div class="name">
				<image class="icon-baokuan mr-5" src="../static/images/baokuan.png" alt="" v-if="game.isBao"></image>
				<span class="name-main mr-5">{{ game.name }}</span>
				<span class="name-sub mr-5" v-if="game.nameSub">{{ game.nameSub }}</span>
				<span class="name-os">
					<u-icon name="android-fill" size="5vw" color="#97c024" v-if="game.isAndroid"/>
					<u-icon name="apple-fill" size="5vw" color="black" v-if="game.isIos"/>
				</span>
			</div>
			<div class="category mb-5">
				<span v-for="(category, index) in game.categorys" :key="`category${index}`">{{ category }}</span>
				<span v-if="game.categorys && game.openInfo">|</span>
				<span v-if="game.openInfo">{{ game.openInfo }}</span>
			</div>
			<div class="activity mb-5">
				<span :class="`activity${index+1}`" v-for="(activity, index) in game.activitys" :key="`activity${index}`">
				{{ activity }}
				</span>
			</div>
			<div class="award">
				<template v-for="(award, index) in game.awards">
					<i>{{ award[0] }}</i><span>{{ award[1] }}</span>
				</template>
			</div>
		</u-col>
	</u-row>
</template>

<script>
	export default {
		props: {
			game: {},
		},
		data() {
			return {

			};
		},
		methods: {
			// 点击事件上报, 交由组件调用方处理
			openGame(game) {
				this.$emit("openGame", game);
			},
		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.list-game-item {
		.icon {
			// img {
			// 	width: 100%;
			// }
			// margin-right: 20px;
			// ::v-deep .u-image__image {box-shadow: 0 0 5px #8c8383;}
		}
		.info {height: calc(100vw/12*3);}
		.name {
			height: 5vw;
			line-height: 5vw;
			display: flex;
			.icon-baokuan {
				width: 5vw;
				height: 5vw;
				font-size: 0;
				vertical-align: text-bottom;
			}

			.name-main {
				font-size: 4vw;
				font-weight: bold;
			}

			.name-sub {
				background: #ea7878;
				font-size: 2.5vw;
				color: white;
				border-radius: 7px 0 7px 0;
				padding: 0 5px;
			}
			.name-os .u-icon {
				display: inline-block;
			}
		}

		.category {
			color: gray;
			font-size: 3vw;
			span {
				margin-right: 5px;
			}
		}

		.activity {
			font-size: 3vw;
			span {
				margin-right: 5px;
				border-radius: 5px;
				padding: 0 2px;
			}

			.activity1 {
				color: orange;
				background: #ffe9bf;
				border: 1px solid orange;
			}

			.activity2 {
				color: #13a2ce;
				background: #99d4ff;
				border: 1px solid #13a2ce;
			}

			.activity3 {
				color: #ef5d5d;
				background: #f5c2c2;
				border: 1px solid #ef5d5d;
			}
		}

		.award {
			font-size: 2.5vw;
			i {
				font-style: normal;
				color: white;
				background: #ea7878;
				padding: 0 5px;
				border: 1px solid #ef5d5d;
				border-right: 0;
				border-radius: 5px 0 0 5px;
			}

			span {
				margin-right: 5px;
				border-radius: 0 5px 5px 0;
				padding: 0 2px 0 5px;
				border: 1px solid #ef5d5d;
				color: #ef5d5d;
			}
		}
	}
</style>